<template>
  <div>
     <el-date-picker
      v-model="year"
      type="year"
      placeholder="选择年份"
      v-if ='type === 1'
      @change ='changeYear'
      class='set-width'>
    </el-date-picker>
    <el-date-picker
      v-model="month"
      type="month"
      placeholder="选择年/月份"
      @change='changeMonth'
      v-if ='type === 2'
      class='set-width'>
    </el-date-picker>
    <div v-if='type === 32'>
      <el-date-picker
      v-model="year"
      type="year"
      placeholder="选择年份"
      @change = 'changeQuarter'
      style = 'width:49%'>
     </el-date-picker>
     <el-select style='width:49%' v-model='month' placeholder="选择季度" @change='quarterChange'>
        <el-option label="第一季度" value='2'></el-option>
        <el-option label="第二季度" value='5'></el-option>
        <el-option label="第三季度" value='8'></el-option>
        <el-option label="第四季度" value='11'></el-option>
      </el-select>
    </div>
     <div v-if='type === 33'>
      <el-date-picker
      v-model="year"
      type="year"
      placeholder="选择年份"
      @change = 'changeQuarter'
      style = 'width:49%'>
     </el-date-picker>
     <el-select style='width:49%' v-model='month' placeholder="选择季度" @change='quarterChange'>
        <el-option label="第一季度" value='3'></el-option>
        <el-option label="第二季度" value='6'></el-option>
        <el-option label="第三季度" value='9'></el-option>
        <el-option label="第四季度" value='12'></el-option>
      </el-select>
    </div>
    <div v-if='type === 4'>
      <el-date-picker
      v-model="year"
      type="year"
      placeholder="选择年份"
      @change='changeHalfYear'
      style = 'width:49%'>
     </el-date-picker>
     <el-select style='width:49%' v-model='month' placeholder="请选择时间" @change='halfYearChange'>
        <el-option label="上半年" value='1'></el-option>
        <el-option label="下半年" value='2'></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import * as API from "api/map.js";
export default {
  name: "ReportTime",
  props: ["type"],
  data() {
    return {
      year: "", // 选择的时间
      month: "", // 绑定月份
      record_year: "",
      record_half_year: ""
    };
  },
  created() {},
  methods: {
    changeYear() {
      let year = 0;
      try {
        year = this.year.format("yyyy");
      } catch (err) {
        console.log(err);
        year = "";
      }
      this.$emit("time", {
        year,
        month: 0
      });
    },
    changeMonth() {
      let time = "";
      try {
        time = this.month.format("yyyy-MM");
        time = time.split("-");
      } catch (error) {
        console.log(error);
        time = ["", ""];
      }
      this.$emit("time", {
        year: time[0],
        month: time[1]
      });
    },
    changeQuarter() {
      try {
        this.record_year = this.year.format("yyyy");
      } catch (error) {
        console.log(error);
        this.record_year = "";
      }
      if (this.month) {
        this.$emit("time", {
          year: this.record_year,
          month: this.month
        });
      }
    },
    quarterChange() {
      if (this.record_year) {
        this.$emit("time", {
          year: this.record_year,
          month: this.month
        });
      }
    },
    changeHalfYear() {
      try {
        this.record_half_year = this.year.format("yyyy");
      } catch (error) {
        this.record_half_year = "";
      }
      if (this.month) {
        this.$emit("time", {
          year: this.record_half_year,
          month: this.month
        });
      }
    },
    halfYearChange() {
      if (this.record_half_year) {
        this.$emit("time", {
          year: this.record_half_year,
          month: this.month
        });
      }
    }
  }
};
</script>

<style rel=''  lang='scss' scoped>
.set-width {
  width: 100%;
}
</style>
